import React, {lazy} from 'react';
import {Redirect} from 'react-router-dom';
import HomeLayout from '@/components/Layout/HomeLayout'

const Shop = lazy(() => import('@/pages/Shop'));
const Find = lazy(() => import('@/pages/Find'));
const FindInfo = lazy(() => import('@/pages/FindInfo'))
const TesMap = lazy(() => import('@/pages/TesMap'));
const Tesla = lazy(() => import('@/pages/Tesla'));

// 二级路由级别组件
const Model = lazy(() => import('@/pages/TeslaInfo/Model'))
const Order = lazy(() => import('@/pages/TeslaInfo/Order'))
const TeslaZone = lazy(() => import('@/pages/ShopInfo/TeslaZone'))
const TeslaShop = lazy(() => import('@/pages/ShopInfo/TeslaShop'))

export default [
  {
    path: "/",
    component: HomeLayout,
    routes: [
      {
        path: '/',
        exact: true,
        render: () => <Redirect to={"/find"}/>,
      },
      {
        path: "/find",
        component: (props: any) => (
          <React.Suspense fallback={<div/>}>
            <Find {...props} />
          </React.Suspense>
        ),
        routes: [
          {
            path: '/find/:id',
            component: (props: any) => (
              <React.Suspense fallback={<div/>}>
                <FindInfo {...props} />
              </React.Suspense>
            ),
          }
        ]
      },
      {
        path: "/tesla",
        component: (props: any) => (
          <React.Suspense fallback={<div/>}>
            <Tesla {...props} />
          </React.Suspense>
        ),
        routes: [
          {
            // path: '/tesla/:id' 写这个会匹配进去
            path: '/tesla/car/:id',
            component: (props: any) => (
              <React.Suspense fallback={<div/>}>
                <Model {...props} />
              </React.Suspense>
            ),
          },
          {
            path: '/tesla/order',
            component: (props: any) => (
              <React.Suspense fallback={<div/>}>
                <Order {...props} />
              </React.Suspense>
            ),
          }
        ]
      },
      {
        path: "/tesMap",
        component: (props: any) => (
          <React.Suspense fallback={<div/>}>
            <TesMap {...props} />
          </React.Suspense>
        )
      },
      {
        path: "/shop",
        component: (props: any) => (
          <React.Suspense fallback={<div/>}>
            <Shop {...props} />
          </React.Suspense>
        ),
        routes: [
          {
            path: '/shop/teslaShop',
            component: (props: any) => (
              <React.Suspense fallback={<div/>}>
                <TeslaShop {...props} />
              </React.Suspense>
            ),
          },
          {
            path: '/shop/teslaZone/:id',
            component: (props: any) => (
              <React.Suspense fallback={<div/>}>
                <TeslaZone {...props} />
              </React.Suspense>
            ),
          }
        ]
      }
    ]
  }
]
